@import "normalize.css";
@import "font-awesome.min.css";
@import "swiper.min.css";
%oneline {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

%borderTopAndmarginBottom {
    border-top: 1px solid #efefef;
    margin-bottom: 200px;
}

body {
    font-family: "Microsoft Yahei";
}

.wrapper {
    width: 800px;
    margin: 0 auto;
}

$headerColor:#8e2800;
%readername {
    font-size: 2.5em;
    line-height: 2;
    background-color: $headerColor;
    color: white;
    text-indent: 10px;
}


/* research start */

.research {
    height: 120px;
    background-color: $headerColor;
    display: flex;
    #research {
        display: inline-block;
        margin: auto;
        input {
            width: 500px;
            padding: 15px;
            font-family: "Microsoft Yahei";
            font-size: 2em;
            border-radius: 15px;
            outline: none;
            border: none;
            vertical-align: middle;
        }
        button {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 3.8em;
            vertical-align: middle;
            outline: none;
            padding: 0 25px;
            i {
                color: white;
            }
        }
    }
}


/* research end */


/* libraryName start */

header {
    .libname {
        font-size: 3em;
        padding: 10px 0;
        text-align: center;
        line-height: 2;
        background-color: $headerColor;
        color: white;
        text-indent: 10px;
        @extend %oneline;
    }
}


/* libraryName end */


/* section.headerimg start */

.headerimg {
    //border-bottom: 5px solid $headerColor;
    //overflow: hidden;
    .swiper-container {
        width: 800px;
        height: 400px;
    }
    .swiper-slide {
        background-image: url(../img/headerimg.jpg);
    }
    @for $i from 0 to 5 {
        .hdimg0#{$i + 1} {
            background-position: 0 (-(400px * $i));
        }
    }
    .swiper-pagination {
        span {
            width: 20px;
            height: 20px;
            background-color: white;
        }
    }
}


/* section.headerimg end*/


/* section.content start */

.content ul,
footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.content {
    margin-bottom: 150px;
    ul {
        display: flex;
        flex-flow: row wrap;
        li {
            width: 200px;
            display: block;
            box-sizing: border-box;
            //border: 1px solid #efefef;
            border-left: 1px solid #efefef;
            border-bottom: 1px solid #efefef;
            &:nth-of-type(1),
            &:nth-of-type(5),
            &:nth-of-type(9) {
                border-left: none;
            }
            &:nth-of-type(9),
            &:nth-of-type(10),
            &:nth-of-type(11),
            &:nth-of-type(12) {
                border-bottom: none;
            }
        }
    }
    .icon-txt {
        display: flex;
        flex-flow: column wrap;
        padding: 15px 0;
        &:hover {
            background-color: rgba(#efefef, .8);
        }
        .icon,
        .txt {
            display: inline-block;
        }
        $icondes:120px; //icon图标的大小
        .icon {
            width: $icondes;
            height: $icondes;
            background-image: url(../img/DesktopICON.png);
            background-size: $icondes * 4;
            margin: auto;
        }
        /*第一排icon*/
        @for $i from 0 to 4 {
            #icon1-#{$i + 1} {
                background-position: -($i * $icondes) 0;
            }
        }
        /*第二排icon*/
        @for $i from 0 to 4 {
            #icon2-#{$i + 1} {
                background-position: -($i * $icondes) -#{$icondes};
            }
        }
        /*第三排icon*/
        @for $i from 0 to 4 {
            #icon3-#{$i + 1} {
                background-position: -($i * $icondes) -#{$icondes * 2};
            }
        }
        .txt {
            width: 100%;
            text-align: center;
            box-sizing: border-box;
            font-weight: 500;
            font-size: 2em;
            font-family: "Microsoft Yahei";
            color: darkcyan;
        }
    }
}


/* section.content end */


/*footer start*/

footer {
    position: fixed;
    bottom: 0;
    width: 800px;
    left: 50%;
    margin-left: -400px;
}

.footernav {
    $des: 60px; //底部icon图标大小
    display: flex;
    flex-flow: row wrap;
    li {
        background-color: white;
        box-sizing: border-box;
        width: 200px;
        box-sizing: border-box;
        border-top: 1px solid #efefef;
        &:hover {
            background-color: rgba(#efefef, 1);
        }
    }
    li+li {
        border-left: 1px solid #efefef;
    }
    a {
        text-decoration: none;
        display: inline-block;
        box-sizing: border-box;
        width: 100%;
        padding: 10px 0 10px 0;
        //height:200px;
        .footerimg {
            width: $des;
            height: $des;
            margin: auto;
            background-image: url(../img/DesktopICON.png);
            background-size: 4 * $des;
        }
        @for $i from 0 to 4 {
            .ftimg0#{$i + 1} {
                background-position: -($i * $des) -#{$des * 4};
            }
        }
        span {
            display: inline-block;
            text-align: center;
            width: 100%;
            color: gray;
            font-size: 1.8em;
        }
    }
    .active {
        @for $i from 0 to 4 {
            .ftimg0#{$i + 1} {
                background-position: -($i * $des) -#{$des * 3};
            }
        }
        span {
            color: $headerColor;
            //font-weight: bold;
        }
    }
}


/* footer end */


/*--------------- barcode start ------------------------*/

#barcode {
    @extend %borderTopAndmarginBottom;
    .name,
    .tiaoma {
        font-size: 2.5em;
        line-height: 2;
        background-color: $headerColor;
        color: white;
        i {
            display: inline-block;
            width: 1.5em;
            text-align: center;
            padding-left: 0.5em;
        }
    }
    .tiaoma {
        border-top: 2px dashed #efefef;
    }
    .tip {
        font-size: 1.8em;
        text-align: center;
        margin: 10px 0;
        font-weight: 500;
    }
    .code-39,
    .code-128 {
        display: flex;
        flex-flow: column wrap;
        padding: 0 20px;
        h2 {
            //padding-left: 2em;
        }
        .code {
            height: 200px;
            text-align: center;
            margin: auto;
            div:last-child {
                font-size: 1.5em !important;
            }
        }
    }
    .code-39 {}
}


/*------------- barcode end --------------*/


/*------------- record start --------------*/

#record,
#renew {
    @extend %borderTopAndmarginBottom;
    .readername {
        @extend %readername;
        @extend %oneline;
    }
    ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .oneoflist {
        display: flex;
        flex-flow: row wrap;
        text-decoration: none;
        margin: 10px 0;
        &:nth-of-type(even) {
            background-color: #efefef;
        }
        .first {
            display: flex;
            background-color: $headerColor;
            flex: 1.2;
        }
        .last {
            flex: 9;
            font-size: 2em;
            //background-color: orange;
            color: black;
        }
        .renewop {
            flex: 1.5;
            display: flex;
            flex-flow: column nowrap;
            button {
                flex: 1 100%;
                outline: none;
                border: none;
                display: inline-block;
                cursor: pointer;
                font-family: "Microsoft Yahei";
                font-size: 2em;
                background-color: rgba($headerColor, .8);
                color: white;
                border-top-left-radius: 10px;
                border-bottom-left-radius: 10px;
            }
        }
        .number {
            margin: auto;
            font-size: 3em;
            color: white;
        }
        .bookname {
            @extend %oneline;
            font-size: 1.2em;
            font-weight: bold;
        }
        .bookout,
        .bookin,
        .resttime,
        .renewtimes,
        .booknum1,
        .booknum2 {
            text-indent: 1em;
            display: flex;
            flex-flow: row wrap;
            span:first-child {
                display: inline-block;
                flex: 1;
            }
            span:last-child {
                flex: 1.4;
                border-left: 1px solid $headerColor;
            }
        }
    }
}


/*------------- record end --------------*/


/*------------- myscore start -----------------*/

#myscore {
    @extend %borderTopAndmarginBottom;
    .readername {
        @extend %readername;
        @extend %oneline;
    }
    .sinf,
    .sgrade {
        border-collapse: collapse;
        width: 100%;
        text-align: center;
        font-size: 2em;
        border: 1px solid #efefef;
        th {
            border-bottom: 1px solid #efefef;
            //background-color: rgba($headerColor,.2);
            background-image: linear-gradient(to top, rgba($headerColor, .3), rgba($headerColor, .1));
        }
        th,
        td {
            padding: 20px 0;
        }
        tr:nth-of-type(even) {
            background-color: #efefef;
        }
    }
    #graph {
        width: 800px;
        height: 900px;
        margin: 40px 0;
    }
}


/*------------- myscore end -----------------*/


/*------------- renew start -----------------*/


/* the same with record */


/*------------- renew end -----------------*/


/*------------- readingtest start -----------------*/

#readingtest {
    margin-bottom: 200px;
    .swiper-container2 {
        width: 800px;
        height: 300px;
        position: relative;
    }
    .swiper-slide {
        background-image: url(../img/readingtest.jpg);
    }
    @for $i from 0 to 5 {
        .swiper-container2 .rdtimg#{$i+1} {
            background-position: 0 -(#{$i * 300px});
        }
    }
    .header {
        position: absolute;
        z-index: 999;
        bottom: 0;
        font-size: 4em;
        color: $headerColor;
        text-shadow: 1px 1px 3px rgba(white, .5);
        background-color: rgba(white, .4);
        padding: 30px 30px;
        font-weight: bold;
        width: 100%;
        box-sizing: border-box;
    }
    .readername {
        @extend %readername;
        @extend %oneline;
    }
    .menu {}
    .passornot,
    .menu-nav,
    .menu-search {
        display: flex;
        padding: 5px;
    }
    .passornot label,
    .menu-nav label {
        text-align: center;
        box-sizing: border-box;
        padding: 20px 0;
        font-size: 2.5em;
        margin: 5px;
        background-color: rgba($headerColor, .2);
        cursor: pointer;
        font-weight: 500;
    }
    .passornot,
    .menu-nav {
        input {
            display: none;
        }
        input:checked+label {
            background-color: rgba($headerColor, .5);
        }
    }
    .passornot {
        label {
            flex: 1;
        }
    }
    .menu-nav {
        margin: 0;
        list-style: none;
        flex-flow: row wrap;
        label {
            flex: 1 20%;
        }
    }
    .menu-search {
        background-color: $headerColor;
        input,
        button {
            outline: none;
            border: none;
            font-size: 3em;
            margin: 5px;
        }
        input {
            flex: 3.5;
            padding: 5px 10px;
        }
        button {
            flex: 1;
            font-family: "Microsoft Yahei";
            background-image: linear-gradient(to top, rgba($headerColor, .4), white);
            font-weight: 400;
        }
    }
    .books {
        padding: 10px;
        .book-nopass,
        .book-pass {
            display: none;
            .star {
                background-image: url(../img/star.png);
                background-repeat: no-repeat;
                background-size: 50px;
                display: inline-block;
                width: 50px;
                height: 50px;
            }
            ul {
                list-style: none;
                margin: 0;
                padding: 0;
            }
            li {
                &:nth-of-type(even) {
                    background-color: #efefef;
                }
            }
            a {
                text-decoration: none;
                display: flex;
                padding: 30px 40px;
                color: darkcyan;
                span:first-child {
                    flex: 1;
                    font-size: 2.5em;
                    line-height: 50px;
                    @extend %oneline;
                    font-weight: 500;
                }
                span:last-child {
                    flex: 0 50px;
                }
            }
        }
        .book-pass {}
        .book-nopass {
            .star {
                background-position: 0 -50px;
            }
        }
    }
}


/*------------- readingtest end -----------------*/


/*------------- readingtest-pass start -----------------*/

#readingtest-pass,
#readingtest-nopass {
    @extend %borderTopAndmarginBottom;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
    .bookname {
        @extend %readername;
        @extend %oneline;
    }
    .bookimg {
        background-image: url(../img/book01.jpg);
        background-repeat: no-repeat;
        background-size: contain;
        width: 400px;
        height: 400px;
        margin: 0 auto;
    }
    .answertimes,
    .answertime,
    .questionnum {
        font-size: 2.5em;
        margin: 5px 25px;
        padding: 15px;
        border-radius: 10px;
        color: white;
        text-shadow: 1px 1px 2px rgba(black, .6);
        position: relative;
        box-shadow: 1px 1px 3px rgba(black, .6);
        animation: slide 1s;
        animation-fill-mode: forwards;
        i {
            display: inline-block;
            width: 2em;
            text-align: center;
        }
        span {
            display: inline-block;
            position: absolute;
            right: 100px;
            text-align: right;
            font-weight: bold;
        }
        &:after {
            content: "";
            display: block;
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 100%;
            top: 10px;
            right: 10px;
            background-color: white;
            box-shadow: 1px 1px 3px rgba(black, .6) inset;
        }
    }
    .answertimes {
        background-image: linear-gradient(to top, rgba($headerColor, .4), rgba($headerColor, .3));
        //top: -100px;
        z-index: -100;
    }
    .answertime {
        background-image: linear-gradient(to top, rgba($headerColor, .6), rgba($headerColor, .3));
        top: -80px;
        z-index: -101;
    }
    .questionnum {
        background-image: linear-gradient(to top, rgba($headerColor, .8), rgba($headerColor, .3));
        top: -160px;
        z-index: -102;
    }
    @keyframes slide {
        100% {
            top: 0;
        }
    }
    .passtime {
        text-align: center;
        font-size: 3em;
        margin: 0 30px;
        //background-color: rgba($headerColor, .8);
        color: $headerColor;
        padding: 20px;
        margin: 10px 0;
        position: relative;
        p {
            margin: 0;
            line-height: 1.5;
            &:last-of-type {
                font-weight: bold;
            }
        }
    }
    .button {
        display: flex;
    }
    .share,
    .return,
    .startanswer {
        flex: 1;
        outline: none;
        border: none;
        font-size: 3em;
        font-family: "Microsoft Yahei";
        background-color: $headerColor;
        color: white;
        padding: 25px;
    }
    .share,
    .startanswer {
        margin-left: 15px;
    }
    .return {
        margin-right: 15px;
    }
    .displaynone {
        display: none;
    }
    .close{
        position: absolute;
        top: -15px;
        right: -15px;
        z-index: 999;
        width:50px;
        height:50px;
        border-radius: 100%;
        display: flex;
        background-color:$headerColor;
        cursor: pointer;
        i{
            margin: auto;
            transform: rotate(45deg);
            color:white;
            font-size: 2.5em;
        }
    }
    .share-place {
        width: 700px;
        position: fixed;
        z-index: 998;
        left: 50%;
        margin-left: -350px;
        top: 40vh;
        .icon {
            width: 6em;
            height: 6em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: space-around;
            box-sizing: border-box;
            border: 1px solid $headerColor;
            background-color: white;
            width: 100%;
            position: relative;
        }
        li {
            display: flex;
            flex-flow: column nowrap;
            text-align: center;
            padding: 50px 20px;
            cursor: pointer;
            span {
                font-size: 1.5em;
            }
        }
    }
    .passimg,
    .nopassimg {
        $width: 300px;
        height: $width;
        width: $width;
        background-image: url(../img/DesktopICON.png);
        background-size: $width * 4;
        position: absolute;
        top: -50px;
        right: 10px;
        z-index: -999;
        animation: bigsmall 1s ease;
        animation-delay: .5s;
        animation-fill-mode: both;
    }
    .nopassimg {
        $width: 300px;
        background-position: (- $width) (-($width * 5));
    }
    .passimg {
        $width: 300px;
        background-position: 0 (-($width * 5));
    }
    @keyframes bigsmall {
        from {
            transform: scale(2) rotate(20deg);
            opacity: 0;
        }
        to {
            transform: scale(1) rotate(20deg);
            opacity: .3;
        }
    }
}


/*------------- readingtest-pass end -----------------*/


/*------------- readingtest-nopass start-----------------*/


/*the same as readingtest-pass*/


/*------------- readingtest-nopass end -----------------*/
